import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Tag, Modal, message, Divider, Upload,
} from 'antd';

import styles from './ChooseModal.less';


const FormItem = Form.Item;
const { CheckableTag } = Tag;

@Form.create()
export default class ChannelModal extends PureComponent {
  constructor(props) {
    super(props);
    // console.log('初始化数据', this.props.channelList);
  }

  state = {
    checkedId: null,
    checkedName: null,
  };

  _okHandle() {
    this.props.addChannel(this.state.checkedId)
    this.setState({ checkedId: null })
  }

  _checkTag(checked, checkedId, checkedName) {
    this.setState({ checkedId: checkedId, checkedName: checkedName })
  }

  render() {
    const { channelList, hadChannelList } = this.props;
    return (
      <Modal
        width={800}
        destroyOnClose
        title="添加频道"
        visible={this.props.visible}
        afterClose={() => this.setState({ checkedId: null })}
        onOk={() => this._okHandle()}
        onCancel={() => { this.setState({ checkedId: null }); this.props.cancel(false) }}
      >
        <div>
          {channelList && (channelList.length > 0) ?
            channelList.map((item, i) =>
              (item && item.children && (item.children.length > 0)) ?
                <div key={i}>
                  <Card>
                    <div>{item.title}</div>
                    <div className={styles.tagWrapper}>
                      {item.children.map((child, j) => (
                        hadChannelList.includes(child.value) ?
                          <span className={styles.tag1} key={child.value}>{child.title}</span>
                          :
                          <CheckableTag key={child.value} checked={child.value == this.state.checkedId ? true : false} className={styles.tag} onChange={(checked) => this._checkTag(checked, child.value, child.title)}
                            disabled={hadChannelList.includes(child.value)}
                          >
                            {child.title}
                          </CheckableTag>


                      )
                      )}
                    </div>
                  </Card>

                </div>

                : null
            ) : null
          }
        </div>

      </Modal>
    )
  }
}